<template>
  <div class="goods">
    <div class="swiper">
      <swiper
        class="swiper-container"
        indicator-dots="true"
        autoplay="true"
        interval="3000"
        duration="1000"
      >
        <block v-for="(item, index) in gallery" :key="index">
          <swiper-item class="swiper-item">
            <img :src="item.img_url" alt class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
      <!-- open-type="share" 要分享必须在小程序中这么写 ;不用任何js操作，点击就会出现分享窗口 -->
      <button class="share" hover-class="none" open-type="share" value>分享商品</button>
    </div>
    <div class="swiper-b">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <!-- 商品信息描述 -->
    <div class="goods-info">
      <div class="c">
        <p>{{info.name}}</p>
        <p>{{info.goods_brief}}</p>
        <p>￥{{info.retail_price}}</p>
        <div class="brand" v-if="brand.name">
          <p>{{brand.name}}</p>
        </div>
      </div>
    </div>
    <div class="section-nav" @click="showType">
      <div>请选择规格数量</div>
      <!-- 下面这个div用来装箭头 -->
      <div></div>
    </div>
    <!-- 商品参数 -->
    <div class="attribute">
      <div class="head">商品参数</div>
      <div class="item" v-for="(item, index) in attribute" :key="index">
        <div>{{item.name}}</div>
        <div>{{item.value}}</div>
      </div>
    </div>
    <!-- 商品图片展示 -->
    <div class="detail" v-if="goods_desc">
      <!-- mpvue提供的需要npm下载 -->
      <wxParse :content="goods_desc" />
    </div>
    <!-- 常见问题 -->
    <div class="common-problem">
      <div class="h">
        <text class="title">常见问题</text>
      </div>
      <div class="b">
        <div class="item" v-for="(item, index) in issueList" :key="index">
          <div class="question-box">
            <text class="spot"></text>
            <text class="question">{{item.question}}</text>
          </div>
          <div class="answer">{{item.answer}}</div>
        </div>
      </div>
    </div>
    <!-- 大家都在看 -->
    <div class="common-problem">
      <div class="h">
        <text class="title">大家都在看</text>
      </div>
      <div class="sublist">
        <div v-for="(subitem, index) in productList" :key="index">
          <img :src="subitem.list_pic_url" alt />
          <p>{{subitem.name}}</p>
          <p>￥{{subitem.retail_price}}</p>
        </div>
      </div>
    </div>
    <!-- 底部footbar -->
    <div class="bottom-fixed">
      <div class="collect-box" @click="collect">
        <div class="collect" :class="[collectFlag ? 'active':'']"></div>
      </div>
      <div class="car-box" @click="toCart">
        <div class="car">
          <span>{{allnumber}}</span>
          <img src="../../../static/images/ic_menu_shoping_nor.png" alt />
        </div>
      </div>
      <div @click="buy">立即购买</div>
      <div @click="addCart">加入购物车</div>
    </div>
    <!-- 选择规格的弹出层 -->
    <!-- 第一个div是遮罩层 灰色的 -->
    <div class="pop" v-show="showpop" @click="showType"></div>
    <div class="attr-pop" :class="[showpop?'fadeup':'']">
      <div class="top">
        <div class="left">
          <img :src="info.primary_pic_url" alt />
        </div>
        <div class="right">
          <div>
            <p>价格￥{{info.retail_price}}</p>
            <p>请选择数量</p>
          </div>
        </div>
        <div class="close" @click="showType">×</div>
      </div>
      <div class="b">
        <p>数量</p>
        <div class="count">
          <div class="cut" @click="reduce">-</div>
          <input type="text" class="number" v-model="number" disabled />
          <div class="add" @click="add">+</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "../../utils/index";
import wxParse from "mpvue-wxparse";
export default {
  data() {
    return {
      gallery: [], //banner图
      id: "",//商品id
      openId: "",
      info: {}, //商品信息
      brand: {}, //有的商品有brand 有的没有
      showpop: false,
      number: 0,
      attribute: [], //商品参数
      goods_desc: "",
      issueList: [], //常见问题
      productList: [],
      collectFlag: false,
      goodsId: "",
      allnumber: 0, //购车车图标上面的那个数字
      allPrice: 0
    };
  },
  //~ 引入组件之后需要在这里注册以下，要是小程序的话需要在index.json引入组件
  components: {
    wxParse
  },
  //- 商品分享 --小程序用的方法
  onShareAppMessage() {
    console.log(this.info.name);
    return {
      title: this.info.name,
      //希望别人点击分享的东西来进入小程序的哪个页面
      path: "/pages/goods/main?id" + this.info.id,
      //分享给别人的显示什么图片
      imageUrl: this.gallery[0].img_url
    };
  },
  mounted() {
    this.openId = wx.getStorageSync("openId");
    this.id=this.$root.$mp.query.id
    this.goodsDetail();
  },
  methods: {
    async goodsDetail() {
      const data = await get("/goods/detailaction", {
        id: this.id,
        //`需要知道是哪一位用户在查看当前商品的详情页(因为要做分享，就需要知道账号才能进行分享)
        openId: this.openId
      });
      this.gallery = data.gallery;
      this.info = data.info;
      this.attribute = data.attribute;
      this.goods_desc = data.info.goods_desc;
      this.issueList = data.issue;
      this.productList = data.productList;
      this.goodsId = data.info.id;
      this.collectFlag = data.collected;
      this.allnumber = data.allnumber;
      this.allPrice = data.info.retail_price;
      // console.log(data);
    },
    showType() {
      this.showpop = !this.showpop;
    },
    add() {
      this.number++;
    },
    reduce() {
      if (this.number > 1) {
        this.number--;
      } else {
        return false;
      }
    },
    async collect() {
      this.collectFlag = !this.collectFlag;
      //传递给后端，需要知道是被哪一位用户给收藏了
      const data = await post("/collect/addcollect", {
        openId: this.openId,
        goodsId: this.goodsId
      });
    },
    toCart() {
      //这个是跳转导航页面
      wx.switchTab({
        url: "/pages/cart/main"
      });
    },
    async buy() {
      //先判断弹出层是否已经弹出
      if (this.showpop) {
        //判断购物车中的数量 如果商品数量为0 则弹出提示消息
        if (this.number == 0) {
          wx.showToast({
            title: "请选择商品数量",
            icon: "none",
            image: "",
            duration: 1500,
            //显示蒙层（就是出现蒙层的时候，其他的地方不能被点击了）
            mask: true,
            success: result => {},
            fail: () => {},
            complete: () => {}
          });
          return false;
        }
        const data = await post("/order/submitAction", {
          goodsId: this.goodsId,
          openId: this.openId,
          allPrice: this.allPrice
        });
        // console.log(data);
        //订单插入成功 切换到支付订单页面
        if (data) {
          wx.navigateTo({
            url: "/pages/order/main"
          });
        }
      } else {
        this.showpop = true;
      }
    },
    async addCart() {
      if (this.showpop) {
        this.allnumber = this.allnumber + this.number;
        if (this.number === 0) {
          wx.showToast({
            title: "请选择商品数量",
            icon: "none",
            image: "",
            duration: 1500,
            //显示蒙层（就是出现蒙层的时候，其他的地方不能被点击了）
            mask: true,
            success: result => {},
            fail: () => {},
            complete: () => {}
          });
          return false;
        }
        const data = await post("/cart/addCart", {
          openId: this.openId,
          goodsId: this.goodsId,
          number: this.number
        });
        if (data) {
          wx.showToast({
            title: "添加购物车成功",
            icon: "none",
            image: "",
            duration: 1500,
            mask: false,
            success: result => {},
            fail: () => {},
            complete: () => {}
          });
        }
      } else {
        this.showpop = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import url("../../../node_modules/mpvue-wxparse/src/wxParse.css");
@import url("./style.less");
</style>